<template>
  <j-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :fullscreen.sync="fullscreen"
    @cancel="handleCancel"
    :footer="null"
  >
    <a-card :bordered="false">
      <detail-list>
        <detail-list-item term="姓名/昵称">{{ model.realName }}</detail-list-item>
        <detail-list-item term="获取的总积分">{{ model.totalAmount }}</detail-list-item>
      </detail-list>
    </a-card>
    <!-- 明细 -->
    <a-card :bordered="false" title="积分明细">
      <ReportTotalBalanceList :params="MemberTotalBalanceParam"></ReportTotalBalanceList>
    </a-card>
  </j-modal>
</template>

<script>
import PageLayout from '@/components/page/PageLayout'
import STable from '@/components/table/'
import DetailList from '@/components/tools/DetailList'
import ABadge from 'ant-design-vue/es/badge/Badge'
const DetailListItem = DetailList.Item
import ReportTotalBalanceList from './ReportTotalBalanceList'

export default {
  components: {
    PageLayout,
    ABadge,
    DetailList,
    DetailListItem,
    STable,
    ReportTotalBalanceList,
  },
  name: 'ReportMemberTotalBalanceDetaill',

  data() {
    return {
      title: '详情',
      fullscreen: true,
      disableMixinCreated: true,
      visible: false,
      model: {},
      MemberTotalBalanceParam: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
    }
  },
  created() {},
  methods: {
    clear() {
      this.model = {}
    },
    view(record, param) {
      this.model = Object.assign({}, record)
      this.MemberTotalBalanceParam = { memberId:record.memberId, mobile:param.mobile, realName:param.realName}
      this.visible = true
    },
    close() {
      this.$emit('close')
      this.clear()
      this.visible = false
    },
    handleCancel() {
      this.close()
    },
  },
}
</script>

<style lang="less" scoped>
.title {
  color: rgba(0, 0, 0, 0.85);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}
</style>